<template>
  <div class="decorateHead">
    <div class="left">
      <a href="javascript:;" @click="goBack">
        <i class="el-icon-back"></i>
        <span>返回</span>
      </a>
      <a href="javascript:;" class="on">
        <i class="el-icon-s-open"></i>
        <span>页面装修</span>
      </a>
    <a href="javascript:;" @click="gotoStartAds">
        <i class="el-icon-s-opportunity"></i>
        <span>启动广告</span>
      </a>
     <!--   <a href="javascript:;" @click="gotoSetLogin">
        <i class="iconfont icon-huiyuan2"></i>
        <span>登录设置</span>
      </a> -->
    </div>
    <div class="right">
      <a href="javascript:;" @click="gotoSet">
        <i class="el-icon-setting"></i>
        <span>页面设置</span>
      </a>
      <a href="javascript:;" @click="gotoPreview">
        <span>预览</span>
      </a>
      <a href="javascript:;" @click="saveAndRelease" class="release">
        <i class="el-icon-s-promotion"></i>
        <span>保存</span>
      </a>
    </div>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import Bus from "@/utils/bus";
import headApi from '@/utils/hade';
export default {
  name: "decorateHead",
  data() {
    return {
      pageId: "",
      pageKey: "",
      pageType: 0, //0 自定义页面 1 个性化页面 2 固定页面 3 登录页面  4 自定义表单  5底部导航按钮  6 固定主题色  7 登录主题
      tenantId: 299, //租户ID
    };
  },
  props: [],
  components: {},
  created() {},
  mounted() {
    if(localStorage.getItem("tenantId")) {
      this.tenantId = localStorage.getItem("tenantId");
    }
  },
  methods: {
    //预览
    gotoPreview() {
      //预览之前先做数据合法性校验
      if (this.$store.state.decorate.controls.length == 1) {
        //没有添加组件时，不能生成页面，因此不支持预览
        this.$message.warning("您还没有添加任何组件");
        return false;
      }
      Bus.$emit("showPreview");
    },
    //保存并发布
    saveAndRelease() {
      //保存之前先做数据合法性校验
      if (this.$store.state.decorate.controls.length == 1) {
        //没有添加组件时，不能生成页面，因此不支持保存
        this.$message.warning("您还没有添加任何组件");
        return false;
      }

      let controls = this.$store.state.decorate.controls;
      //当遇到校验不合法的地方，弹出提示的提示语
      let tipsText = "";
      //遍历组件列表
      for (let c = 0; c < controls.length; c++) {
        let control = controls[c];

        //页面顶部组件
        if (control.ename === "pageTopComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if (!m.pageName) {
            tipsText = "页面顶部 组件中，请您输入页面名称";
            break;
          }
          // if (!m.pageCover) {
          //   tipsText = "页面顶部 组件中，请您上传页面封面图";
          //   break;
          // }
          if (!m.pageTitle) {
            tipsText = "页面顶部 组件中，请您输入页面标题";
            break;
          }
        }
        //图片轮播
        if (control.ename === "carouselImageComponent") {
          //拿到main中的配置数据
          let m = control.main;
          //其它数据无需校验，只有轮播列表内容需要校验
          let list = m.carouselList;
          for (let l = 0; l < list.length; l++) {
            let row = list[l];
            if (!row.imgUrl) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您添加图片";
              break;
            }
            if (!row.linkUrl && !row.linkName) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您选择跳转链接";
              break;
            }
          }
          if (tipsText) {
            break;
          }
        }
        //公告组件
        if (control.ename === "announcementComponent") {
          //拿到main中的配置数据
          let m = control.main;
          //其它数据无需校验，只有公告组件获取公告内容的方式是手动添加，才对添加的内容进行校验
          if (m.getListType === 2) {
            let list = m.list;
            for (let l = 0; l < list.length; l++) {
              let row = list[l];
              if (!row.name) {
                tipsText =
                  "第" +
                  c +
                  "个 " +
                  control.title +
                  " 组件中，内容列表第" +
                  (l + 1) +
                  "项处，请您输入标题";
                break;
              }
              if (!row.linkUrl && !row.linkName) {
                tipsText =
                  "第" +
                  c +
                  "个 " +
                  control.title +
                  " 组件中，内容列表第" +
                  (l + 1) +
                  "项处，请您选择跳转链接";
                break;
              }
            }
            if (tipsText) {
              break;
            }
          }
        }
        //图片组件
        if (control.ename === "imageListComponent") {
          //拿到main中的配置数据
          let m = control.main;
          //其它数据无需校验，只需要对图片列表内容进行校验
          let list = m.carouselContentList;
          for (let l = 0; l < list.length; l++) {
            let row = list[l];
            if (!row.imgUrl) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您选择图片";
              break;
            }
            if (!row.linkUrl && !row.linkName) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您选择跳转链接";
              break;
            }
          }
          if (tipsText) {
            break;
          }
        }
        //按钮组件
        if (control.ename === "buttonGroupComponent") {
          //拿到main中的配置数据
          let m = control.main;
          //其它数据无需校验，只需要对按钮列表内容进行校验
          let list = m.buttons;
          for (let l = 0; l < list.length; l++) {
            let row = list[l];
            if (!row.imgUrl) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您选择按钮图标或图片";
              break;
            }
            if (!row.name) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您输入按钮文字";
              break;
            }
            if (!row.linkUrl && !row.linkName) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您选择跳转链接";
              break;
            }
          }
          if (tipsText) {
            break;
          }
        }
        //列表导航
        if (control.ename === "listNavigationComponent") {
          //拿到main中的配置数据
          let m = control.main;
          //其它数据无需校验，只有导航列表内容需要校验
          let list = m.navList;
          for (let l = 0; l < list.length; l++) {
            let row = list[l];
            if (!row.name) {
              tipsText =
                "第" +
                c +
                "个 " +
                control.title +
                " 组件中，内容列表第" +
                (l + 1) +
                "项处，请您输入导航文字";
              break;
            }
          }
        }
        //标题栏组件
        if (control.ename === "titleComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if (!m.titleText && !m.displaySubTitle && !m.displayMore) {
            tipsText =
              "第" + c + "个 " + control.title + " 组件中，请您输入标题文字";
            break;
          }
        }
        //富文本组件
        if (control.ename === "richTextComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if (!m.textareaContent) {
            tipsText =
              "第" + c + "个 " + control.title + " 组件中，请您输入富文本内容";
            break;
          }
        }
        //辅助线组件
        if (control.ename === "auxiliaryLineComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if (!m.lineColor) {
            tipsText =
              "第" + c + "个 " + control.title + " 组件中，请您选择线条颜色";
            break;
          }
        }
        //悬浮按钮组件
        if (control.ename === "floatButtonComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if (!m.floatButtonImage) {
            tipsText =
              "第" + c + "个 " + control.title + " 组件中，请您选择按钮图片";
            break;
          }
          if (m.floatButtonEvent === "link" && !m.floatButtonLinkUrl) {
            tipsText =
              "第" + c + "个 " + control.title + " 组件中，请您选择跳转链接";
            break;
          }
          if (m.floatButtonEvent === "qrcode" && !m.floatButtonQrCodeUrl) {
            tipsText =
              "第" + c + "个 " + control.title + " 组件中，请您选择二维码图片";
            break;
          }
        }
        //返回顶部组件
        if (control.ename === "backTopComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if (m.displayType === "icon") {
            if (!m.backTopIcon) {
              tipsText =
                "第" + c + "个 " + control.title + " 组件中，请您选择按钮图标";
              break;
            }
          }
          if (m.displayType === "img") {
            if (!m.backTopImage) {
              tipsText =
                "第" + c + "个 " + control.title + " 组件中，请您选择按钮图片";
              break;
            }
          }
          if (m.iconEvent === "jumpLink") {
            if (!m.jumpLinkUrl) {
              tipsText =
                "第" + c + "个 " + control.title + " 组件中，请您选择跳转链接";
              break;
            }
          }
        }
        //会员组组件
        if (control.ename === "memberComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if (m.showSetBtn && !m.setLink) {
            tipsText =
              "第" +
              c +
              "个 " +
              control.title +
              " 组件中，请您选择 设置按钮 的跳转链接";
            break;
          }
          if (!m.authLink) {
            tipsText =
              "第" +
              c +
              "个 " +
              control.title +
              " 组件中，请您选择 实名认证 的跳转链接";
            break;
          }
        }
        //项目组件
        if(control.ename === "projectComponent") {
          //拿到main中的配置数据
          let m = control.main;
          if(!m.list || m.list.length==0) {
            tipsText = "项目列表内容不能为空";
            break;
          }
        }
      }

      if (tipsText) {
        this.$alert(tipsText, "提示", {
          confirmButtonText: "知道了",
          type: "warning",
        });
        return false;
      }
      this.saveComponentData();
    },
    //保存页面配置数据
    saveComponentData() {
      let params = new Object();
      let controls = this.$store.state.decorate.controls;
      controls.forEach(item => {
        item.active = "";
      })
      controls[0].active = "active";
      let pageContent = JSON.stringify(controls);
      params.pageContent = pageContent; //生成页面配置内容

      if(controls[0].main.pageKey) {
        this.pageKey = controls[0].main.pageKey
      } else {
        this.pageKey = new Date().getTime();
      }
      
      params.pageType = this.pageType;

      if(this.pageType === 1) {
        if(!params.pageName) {
          params.pageName = this.pageKey; //页面名称
        }
      } else {
        params.pageName = controls[0].main.pageName; //页面名称
      }



      params.tenantId = this.tenantId; // 租户ID
      if(params.pageType==1) {
        //编辑默认的个性化页面，视为新增个性化页面
        params.pageKey = localStorage.getItem("individualizationPageKey");

      } else {
        params.pageKey = this.pageKey;
      }

      if(params.pageType!=0 && this.pageType!=1) {
        this.$message.warning("pageType未设置");
        return false;
      }

      if(params.pageKey=="") {
        this.$message.warning("请在页面顶部组件中，输入页面关键字");
        return false;
      }

      if(params.pageName=="") {
        this.$message.warning("请在页面顶部组件中，输入页面名称");
        return false;
      }

      if(params.pageContent=="") {
        this.$message.warning("数据异常，请退出重进");
        return false;
      }
      // console.log(params);return false;
      if (this.pageId) {
        params.id = this.pageId;
        this.saveUpdate(params);
      }else{
        this.saveCreate(params)
      }
    },
    saveCreate(params){
      if (getToken()) {
      this.$parent.loading = true;
      this.axios
        .post(`${headApi}/appPageContent`, params,{headers: { Authorization: "Bearer " + getToken()}})
        .then((res) => {
          this.$parent.loading = false;
          //console.log(3,res);
          if (res && res.data) {
            let { code, data, msg } = res.data;
            if (code === 200) {
              this.$message.success("保存成功");
              setTimeout(() => {
                let pageName = "";
                if(this.pageType===0) {
                  pageName = "customize";
                }else if(this.pageType===1){
                  pageName = "individualization";
                }
                localStorage.setItem("decorateSetActiveName", pageName);
                this.$router.push({ name: "decorateSet" });
              }, 1200);
            } else {
              if (msg) {
                this.$message.warning(msg);
              } else {
                this.$message.error("接口请求失败");
              }
            }
          } else {
            this.$message.warning("接口请求失败");
          }
        })
        .catch((err) => {
          this.$parent.loading = false;
          console.log(3,err);
        });
      }
    },
    saveUpdate(params){
      if (getToken()) {
      this.$parent.loading = true;
      this.axios
        .put(`${headApi}/appPageContent`, params,{headers: { Authorization: "Bearer " + getToken()}})
        .then((res) => {
          this.$parent.loading = false;
          //console.log(3,res);
          if (res && res.data) {
            let { code, data, msg } = res.data;
            if (code === 200) {
              this.$message.success("保存成功");
              setTimeout(() => {
                let pageName = "";
                if(this.pageType===0) {
                  pageName = "customize";
                }else if(this.pageType===1){
                  pageName = "individualization";
                }
                localStorage.setItem("decorateSetActiveName", pageName);
                this.$router.push({ name: "decorateSet" });
              }, 1200);
            } else {
              if (msg) {
                this.$message.warning(msg);
              } else {
                this.$message.error("接口请求失败");
              }
            }
          } else {
            this.$message.warning("接口请求失败");
          }
        })
        .catch((err) => {
          this.$parent.loading = false;
          console.log(3,err);
        });
      }
    },
    //页面设置
    gotoSet() {
      this.$router.push({ name: "decorateSet" });
    },
    gotoStartAds() {
      this.$router.push({
        name: "setStartAds",
      });
    },
    gotoSetLogin(){
      this.$router.push({
        name: "setLogin",
      });
    },
    //返回上一步
    goBack() {
      this.$router.go(-1);
    },
  },
  computed: {},
  watch: {},
};
</script>

<style scoped lang="scss">
.decorateHead {
  width: 100%;
  height: 60px;
  background-color: #333;
  justify-content: space-between;
  display: flex;
  align-items: center;
  .left,
  .right {
    display: flex;
    height: 100%;
    align-items: center;
  }
  a {
    height: 100%;
    display: flex;
    padding: 0 15px;
    font-size: 14px;
    color: #fff;
    align-items: center;
    &:hover,
    &.on {
      background-color: #000;
    }
    i {
      margin-right: 2px;
    }
    &.release {
      min-width: 80px;
      height: 32px;
      background-color: #5d60f6;
      border-radius: 2px;
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-left: 10px;
    }
  }
}
</style>
